<template>
	<view class="latelyNew" @tap="open">
		<image :src="item.cover"></image>
		<view class="latelyNewContent">
			<text>{{item.title}}</text>
			<text>{{item.desc}}</text>
			<view class="dynamicToday">
				<text>动态: {{item.today_count}}</text>
				<text>今日: {{item.news_count}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: null,
			},
			index: {
				type: Number,
				default: 0,
			}
		},
		methods: {
			// 有两处都可以跳转到详情的页面处
			open() {
				this.$emit("open");
			},
		}
	}
</script>

<style lang="scss">
	// 最近更新
	.latelyNew {
		@include flexCenter;
		height: 180rpx;
		margin: 40rpx 20rpx;
		border-radius: 10rpx;
		overflow: hidden;

		>image {
			flex-basis: 180rpx;
			height: 100%;
			margin-right: 25rpx;
			border-radius: 10rpx;
		}

		.latelyNewContent {
			flex-grow: 1;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			>text {
				&:first-of-type {
					font-size: 1.08rem;
				}

				&:last-of-type {
					color: #A4A1A2;
				}
			}

			.dynamicToday {
				color: #A4A1A2;

				>text {
					&:first-of-type {
						margin-right: 25rpx;
					}
				}
			}
		}
	}
</style>
